<template>
	<view>
		<u-sticky>
			<view class="navtop">
				<view class="status_bar">
					<!-- 这里是状态栏 -->
				</view>
				<view class="navtitle">
					商城积分
					<view class="icon" @click="fanhui()">
						<u-icon name="arrow-left" color="#fff" size="20"></u-icon>
					</view>
				</view>
			</view>
		</u-sticky>

		<view class="main">
			<view class="group-1">
			</view>
			<view class="group-2">
				<view class="text-1">我的积分</view>
				<view class="text-2">{{myPoints ? myPoints : 0}}</view>
				<view class="flex-row group-21">
					<view class="group-211">
						<u-button type="info" shape="circle"  text="积分明细" size="model" class="button-1" @click="integral()"></u-button>
					</view>
					<view class="group-211">
						<u-button type="info" shape="circle"  text="兑换记录" size="model" class="button-1" @click="integralTwo()"></u-button>
					</view>
				</view>
			</view>
			<view class="group-3">
				<view class="text-3">热门兑换</view>
				<view class="flex-row group-31">
					<view class="group-311" v-for="(item,index) in commodity" :key="index">
						<view class="image-1">
						<u--image :showLoading="true" :src="item.fileUrl" width="290rpx" height="250rpx" @click="click(item)"></u--image>
						</view>
						<view class="text-4">{{item.storeName}}</view>
						<view>
							<text class="text-5">{{Number(item.price) * 10}}</text>
							<text class="text-6">积分</text>
						</view>
						<view class="text-7">{{item.price}}</view>
						<view class="text-8"></view>
					</view>

				</view>

			</view>
		</view>
	</view>
</template>

<script>
import {integralMy, integralProductList} from "../../api";

  export default {
		data() {
			return {
        pageInfo: {
          pageNum: 1,
          pageSize: 10
        },
				myPoints: 0,
				commodity:[]
			}
		},
    mounted() {
      console.log('mounted..........')
      this.integralMy()
      this.integralProductList()
    },
		methods: {
      integralMy() {
        integralMy().then(res => {
          this.myPoints = res.data.integral
        })
      },
      integralProductList() {
        integralProductList(this.pageInfo).then(res => {
          this.commodity = this.commodity.concat(res.rows)
        })
      },
			fanhui(){
				this.$emit('returns');
			},
			integral(){
				uni.navigateTo({
					url:'../../subPackages/pages/shoppingmall/integral/integral'
				})
			},
			integralTwo(){
				uni.navigateTo({
					url:'../../subPackages/pages/shoppingmall/exchange/exchange'
				})
			},
			click(item){
				uni.navigateTo({
					url:'../../subPackages/pages/shoppingmall/productDetails/productDetails?id='+item.id + '&type=1'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
.navtop {
		background-image: linear-gradient(to right, #6CBEFF, #1989E1, #1989E1);
		overflow: hidden;

		.status_bar {
			height: var(--status-bar-height);
			width: 100%;
		}

		.navtitle {
			text-align: center;
			font-size: 32rpx;
			color: #fff;
			padding: 20rpx 0;
			position: relative;

			.icon {
				position: absolute;
				left: 10rpx;
				top: 20rpx;
			}
		}
	}
.main{
	width: 100%;
	background-color: #F6F6F6;

}
.group-1{
	width: 100%;
	height: 130rpx;
	border-radius: 0 0 30% 30%;
	background-image: linear-gradient(to right, #6CBEFF, #1989E1, #1989E1);
}
.group-2{
	width: 92%;
	height: 280rpx;
	background-color: #EAC296;
	margin: -15% 0 0 4%;
	border-radius: 16rpx;
	padding-top: 1rpx;
}
.text-1{
	width: 100%;
	height: 50rpx;
	font-size: 34rpx;
	line-height: 50rpx;
	text-align: center;
	margin-top: 30rpx;
	color: #333333;
	font-weight: Regular;
	font-family: SourceHanSansCN-Regular;

}
.text-2{
	width: 100%;
	height: 50rpx;
	font-size: 60rpx;
	line-height: 50rpx;
	text-align: center;
	margin-top: 20rpx;
	color: #333333;
	font-weight: Bold;
	font-family: SourceHanSansCN-Regular;
}
.group-21{
	width: 100%;
	height: 100rpx;
	margin-top: 20rpx;
}
.group-211{
	width: 36%;
	height: 80rpx;
	line-height: 80rpx;
	margin-left: 10%;
	margin-top: 10rpx;

}
.button-1{
	background-color: #EAC296 ;
	font-size: 30rpx;
}
.group-3{
	width: 92%;

	background-color: #FFFFFF;
	margin: 5% 0 0 4%;
	padding-top: 1rpx;
}
.text-3{
	width: 40%;
	height: 50rpx;
	font-size: 34rpx;
	line-height: 50rpx;
	text-align: left;
	margin-top: 40rpx;
	margin-left: 4%;
	color: #333333;
	font-weight: Regular;

	font-family: SourceHanSansCN-Regular;
}
.group-31{
	width: 92%;

	margin: 3% 0 0 4%;
	flex-wrap: wrap;
	justify-content: space-between;
	padding-top: 1rpx;
}
.group-311{
	width: 48%;
	height: 400rpx;
	padding-top: 1rpx;
}
.group-312{
	width: 48%;
	height: 400rpx;

	padding-top: 1rpx;
	margin-left: 4%;
}
.image-1{
	margin: 10rpx 0 0 0rpx;
	border-radius: 30rpx;
}
.text-4{
	font-size: 28rpx;
	color: #333333;
	margin: 10rpx 0 0 30rpx;
}
.text-5{
	font-size: 36rpx;
	color: #2490E5;
	margin: 10rpx 0 0 30rpx;
}
.text-6{
	font-size: 22rpx;
	color: #333333;
	margin: 10rpx 0 0 10rpx;
}
.text-7{
	font-size: 22rpx;
	color: #999999;
	margin: 5rpx 0 0 30rpx;
}
.text-8{
	width: 84rpx;
	height: 1rpx;
	background-color: #999999;
	margin: -14rpx 0 0 30rpx;
}
</style>
